import React  from 'react';
import { observer, inject } from 'mobx-react';
import { Route, withRouter, Switch, Redirect ,BrowserRouter,NavLink} from 'react-router-dom';
import { Tabs, NavBar, Icon ,Grid,Flex,WhiteSpace,WingBlank,Carousel,List} from 'weaver-mobile';
import { TabPage,ListPage,Form } from 'weaver-mobile-page';
import GovernConstant from '../../../util/index'
import { asyncComponent } from 'react-async-component';

const coms = {
  ComForm: asyncComponent({
    resolve: () => import("../../governTools/comForm/comForm")
  })
}
@inject('infoStore')
@withRouter
@observer
//子任务导航
export default class SubtasksUi extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        //data: [],
        index:0
      }
  }
  componentWillMount(){
    // const {infoStore:{getPathname,initInfoPage},location:{pathname,search}} = this.props;
    // getPathname(GovernConstant.getUrlChar(pathname));
    // const id = new URLSearchParams(search).get('id'),
    //       _this = this;
    // initInfoPage({"id":id}).then(
    //   (subtasksNum)=>{
    //     const cacheData = Array(subtasksNum).join(",").split(",").map(function(key,index){return index;});
    //     _this.setState({data:cacheData});
    //   }
    // );
  }
  componentDidMount() {
    // const {infoStore:{initInfoPage},location} = this.props;
    // const id = new URLSearchParams(location.search).get('id'),
    //       _this = this;
    // initInfoPage({"id":id}).then(
    //   (subtasksNum)=>{
    //     const cacheData = Array(subtasksNum).join(",").split(",").map(function(key,index){return index;});
    //     _this.setState({data:cacheData});
    //   }
    // );
  }
  componentWillUnmount(){
    const {infoStore:{clearSubtasksCarousel}} = this.props;
    //clearSubtasksCarousel();
  }
  render() {
    const {history,match,data,form} = this.props;
    return(
      <div className="g-subtasksUi">
      <Carousel
        autoplay={false}
        infinite
        beforeChange={(from, to) => this.setState({index:to})}
        dotActiveStyle={{background:'#70D256'}}
      >
        {data.map(val => (
            <Form style={{ height: '100%' }} key={this.state.index}>
              <List>
                <coms.ComForm comForm={form} subtasksIndex={this.state.index}/>
              </List>
            </Form>
        ))}
      </Carousel>
      </div>
    );
  }
}
